<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import Editor from './components/Editor.vue';
import { Environment } from '@/api/code/environment/type';
import { getCodeContent, getEnvironmentInfoByCodeId, stopCode } from '@/api/code';
import { CodeContent } from '@/api/code/type';

const environment = ref({} as Environment)
const codeId = ref('');
const codeContent = ref({} as CodeContent);
const show = ref(false);
const loading = ref(true);

onMounted(async () => {
    const route = useRoute();
    const id = route.query.id;
    if (id != null && !Array.isArray(id)) {
        codeId.value = id;
        try {
            // 并行请求以提高加载速度
            const [envResponse, contentResponse] = await Promise.all([
                getEnvironmentInfoByCodeId(id as string),
                getCodeContent(id as string)
            ]);
            
            environment.value = envResponse.data as Environment;
            codeContent.value = contentResponse.data as CodeContent;
            show.value = true;
        } catch (error) {
            console.error('加载代码环境失败:', error);
        } finally {
            loading.value = false;
        }
    }
})

onUnmounted(() => {
    stopCode(codeId.value);
})

</script>

<template>
    <div class="code-editor-page">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-container">
            <van-breadcrumb>
                <van-breadcrumb-item to="/user/code/list">在线编程</van-breadcrumb-item>
                <van-breadcrumb-item>{{ environment.name || '代码编辑器' }}</van-breadcrumb-item>
            </van-breadcrumb>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <van-loading type="spinner" size="48px" vertical>加载代码环境中...</van-loading>
        </div>
        
        <!-- 编辑器容器 -->
        <div class="editor-container" v-else-if="show">
            <Editor 
                class="editor" 
                v-model:codeId="codeId"
                v-model="environment" 
                v-model:codeContent="codeContent"
            />
        </div>
        
        <!-- 错误提示 -->
        <div v-else class="error-container">
            <van-empty description="无法加载代码环境，请返回列表重试" />
            <van-button type="primary" round to="/user/code/list" class="back-button">
                返回列表
            </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.code-editor-page {
    width: 100%;
    height: calc(100vh - 108px);
    display: flex;
    flex-direction: column;
    background-color: #f7f8fa;
    
    .breadcrumb-container {
        padding: 16px 24px;
        background-color: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        margin-bottom: 16px;
    }
    
    .loading-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .editor-container {
        flex: 1;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        background: white;
        margin: 0 16px 16px;
        
        .editor {
            height: 100%;
        }
    }
    
    .error-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .back-button {
            margin-top: 16px;
        }
    }
}
</style>